<template>
  <mask-dropdown class="profile-dropdown" trigger="click" :hide-on-click="false">
    <div class="profile-dropdown__link">
      <slot></slot>
    </div>
    <el-dropdown-menu class="profile-dropdown__menu" slot="dropdown" ref="dropdownMenu">
      <div class="profile-dropdown__separate">
        <router-link :to="{name: 'user-info'}" @click.native="close">
          <el-dropdown-item class="profile-dropdown__menu-item">
            <span class="profile-dropdown__menu-title">个人资料</span>
          </el-dropdown-item>
        </router-link>
        <router-link :to="{name: 'user-safety'}" @click.native="close">
          <el-dropdown-item class="profile-dropdown__menu-item">
            <span class="profile-dropdown__menu-title">安全中心</span>
          </el-dropdown-item>
        </router-link>
        <el-dropdown-item class="profile-dropdown__menu-item" @click.native="logoutAccount">
          <span class="profile-dropdown__menu-title">退出</span>
        </el-dropdown-item>
      </div>
    </el-dropdown-menu>
  </mask-dropdown>
</template>

<script>
  import {logout} from '@/build';

  export default {
    name: 'profile-dropdown',

    mixins: [logout],

    data() {
      return {
      };
    },

    methods: {
      close() {
        this.$refs.dropdownMenu.$emit('visible', false);
      },
      logoutAccount() {
        this.close();
        this.logout();
      },
    },
    computed: {
      ...mapGetters([
        'nickName',
        'username',
        'fBalance'
      ])
    },
  }; 
</script>

<style lang="scss" scoped>
  $--padding-spacing: 30px;
  @include b(profile-dropdown) {
    @include e(menu) {
      min-width: 138px;
      padding: 0;
    }

    @include e(link) {
      height: 100%;
      outline: none;
    }

    @include e(top) {
      display: flex;
      padding: 30px 30px 20px 30px;
      border:1px solid $--border-color-base-1;
      border-radius: 5px;
    }
    @include e(menu-item) {
      display:flex;
      align-items:center;
      color:$--color-black;
      background: #f8f8f8;
      font-size:14px;
      padding:6px 20px;
      font-weight: bold;
      @include utils-transition-normal();

      &:hover {
        background: $--background-color-base;
        color:$--color-primary;
      }
    }

    @include e(menu-title) {
      flex:1;
      display:flex;
      align-items:center;
    }
  }
  
</style>